Squarespace Custom Table Block Plugin
Using this plugin you may now create and generate Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do.
Using this plugin you may now create and generate Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do.
Using this plugin you may now create and generate Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do.
Using this plugin you may now create Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do. Plugin hooks Markdown block and builds a HTML5 table for you based on manually added data or imported from *.csv file or synchronized with Google Spreadsheets. We also have some base table styles, mobile view and sorting feature. We allow html and markdown markup in table so you are able to add images and other stuff to tables.
To use all table features, please copy/add this code to your Injections tab :
<link rel="stylesheet" href="//assets.squarewebsites.org/custom-tables/style.css"> <script src="//assets.squarewebsites.org/custom-tables/custom-table.js"></script>
| Scoring Place | Dog Name | Dog Breed | Dog Owner Name | Image |
|---|---|---|---|---|
| 1 | Fredinant | Mixed/Mutt | Franklin Roosevelt |  |
| 2 | Mister Darcy | Basset Hound | Jill Heath |  |
| 3 | Estella | Wirehaired Pointing Griffon | Kyle Pemberton |  |
| 4 | Gruff | Bullmastiff | Glen Smith |  |
| 5 | Timmy | Golden Retriever | Hurley Plimpton |  |
| 6 | Munches | Mixed/Mutt | Missi Lynn |  |
| 7 | Ralphie Dean | Bichon | Tanya Francis |  |
| 8 | Wally | Beagle | Gary Snoopy |  |
| 9 | Dr. Frankenstein | Mixed/Mutt | Brian Cummings | |
| 10 | Hooper | Boxer | John Doe |  |
| 11 | Corndog | Chocolate Lab | Si Robertson |  |
Adding tables control in admin also need you to inject purchased javascript. So the best way is to add css styles to Header Injection while scripts may be in Footer. So your injections will look like:
Added Custom Table Block
If you did Injections right you may see Table Block in Blocks Menu now and ready to create tables.
Table Block in Blocks Menu
Creating Tables process is the same as using our PRO Extension, so please check next "how-to" video.
Removing rows and columns
If you edit Table directly in settings (not with CSV or Google sheet) - you see dots icon when mouseover columns titles or rows - drag this icon and you will see a recycle icon bottom - dragging on this will delete column or row.
Rows/Columns deleting
Styling Tables
Each site has own look, so plugin is not focusing on styling Tables - just giving you a way for easy manage tables on Squarespace site. But you may easy style your tables with just basic CSS knowledges, really simple. Example:
By default Table will follow general body font settings. Let's say you have many columns and need decrease font size to 10px to fit screen.
Table block has classes field, so you may type in Add custom class to your table field: fnt-size-10px, then go to Custom CSS and add a rule for this code.
table.fnt-size-10px { overflow: auto; /*allowing table be scrollable*/ max-height: 70vh; /*limiting max height*/ color: #000; /* set the font color */ font-size: 10px; /*set the font size*/ line-height: 1.4; /* set the text line-height */ font-family: Helvetica; /* set font family */ font-weight: 400; /* set font-weight */ }
That's all folks, any table you added fnt-size-10px will be affected with that rules.
Next, each table row and cell has own number class, so if you want to set first column in bold, you will do:
.custom-table-block .table-cell-1 { font-weight: bold; }
Advanced using
document.querySelector('table').addEventListener('table-init', function () {
----Your code here---
}, false);
